<template>
  <div>
    <Top></Top>
    <BasicInfo></BasicInfo>
  </div>
</template>

<script>
  import Top from '@/components/Top'
  import BasicInfo from '@/components/BasicInfo'

  export default {
    components: {
      Top, BasicInfo
    },
    data () {
      return {
        motto: 'Hello miniprograme',
        userInfo: {
          nickName: 'this.mpvue',
          avatarUrl: 'http://this.mpvue.com/assets/logo.png'
        }
      }
    },
    methods: {
      bindViewTap () {
        const url = '/pages/logs/index'
        this.mpvue.navigateTo({url})
      },
      clickHandle (ev) {
        console.log('clickHandle:', ev)
        // throw {message: 'custom test'}
      }
    },

    created () {
      // let app = getApp()
    }
  }
</script>

<style scoped>
  .userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .userinfo-avatar {
    width: 128 rpx;
    height: 128 rpx;
    margin: 20 rpx;
    border-radius: 50%;
  }

  .userinfo-nickname {
    color: #aaa;
  }

  .usermotto {
    margin-top: 150px;
  }

  .form-control {
    display: block;
    padding: 0 12px;
    margin-bottom: 5px;
    border: 1px solid #ccc;
  }

  .all {
    width: 7.5rem;
    height: 1rem;
    background-color: blue;
  }

  .all:after {
    display: block;
    content: '';
    clear: both;
  }

  .left {
    float: left;
    width: 3rem;
    height: 1rem;
    background-color: red;
  }

  .right {
    float: left;
    width: 4.5rem;
    height: 1rem;
    background-color: green;
  }
</style>
